<script setup>
import { computed, onUnmounted, ref, watch } from 'vue'
import checkResult from '@/components/checkResult.vue'
import success from './components/success.vue'
import priceInfo from '@/components/priceInfo.vue'
import faq from './components/faq.vue'
import effortlessly from './components/effortlessly.vue'
import converter from './components/converter.vue'
import footerCustom from '@/components/footerCustom.vue'
import writing from './components/writing.vue'
import truePower from './components/truePower.vue'
import guaranteed from './components/guaranteed.vue'
import effective from './components/effective.vue'
import detector from '@/components/detector.vue'

const activeType = ref(1)

const input = ref('')

const changeActiveType = (type) => {
  activeType.value = type
}

const deleteIconShow = computed(() => {
  return mouseEnter.value && input.value.length > 0
})

const mouseEnter = ref(false)

// 鼠标移入事件
const onMouseEnter = () => {
  mouseEnter.value = true
}

// 鼠标移出事件
const onMouseLeave = () => {
  mouseEnter.value = false
}

//试用案例
const onTestCases = () => {
  input.value =
    '在繁华喧嚣的城市街道上，各种嘈杂的声音弥漫在空气中，交织成一曲不和谐的交响乐。高耸入云的摩天大楼上，绚烂的霓虹灯光划破夜空，给下方的大都市投下了一层超凡脱俗的光芒。人流在楼宇间的迷宫中穿梭，每个人在熙熙攘攘的人群中都显得形单影只。街头美食滋滋作响的香气与汽车尾气的味道混合在一起，形成了一种令人陶醉的气味交融。尽管一片混乱，但这座城市中却涌动着一股不可否认的活力，恰似那永不停歇的心跳，推动着它在夜色中不断前行。 '
}

//清空文字
const onClearInput = () => {
  input.value = ''
  showTip.value = false
  changeTextMode.value = true
  checkResultShow.value = false
}

//读取用户粘贴板内容
const copy = async () => {
  try {
    const text = await navigator.clipboard.readText()
    input.value = text || ''
  } catch (error) {
    console.error('读取剪贴板内容失败：', err)
  }
}

//检查AI
const checkAI = () => {
  console.log('checkAI')
}
//默认选中AI模型
const modelValue = ref('1')

//AI模型可选项
const modeOptions = [
  {
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMiAxMicgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTcuODUgNy42NjZzMS4zMTgtMS4zMDcgMS43NjUtMS43NjdjMS40MTQtMS4zOC43MS00LjIyNC43MS00LjIyNFM3LjQ5Ljk3MSA2LjEwNyAyLjM4NEE4Ni4wOTIgODYuMDkyIDAgMDA0LjMyOSA0LjE2cy0xLjc3LS4zNjgtMi44MjkuNjlsNS42NDUgNS42NWMxLjA2LTEuMDcyLjcwNS0yLjgzNC43MDUtMi44MzRabS0uNjkxLTQuMTQxQS45MjIuOTIyIDAgMTE4LjMyMyA0Ljk0YS45MjMuOTIzIDAgMDEtMS40MTYtLjk0NC45Mi45MiAwIDAxLjI1Mi0uNDcxWk0xLjk2IDEwLjA0YTMuNjAyIDMuNjAyIDAgMDAyLjMwNC0uOTJMMi44ODIgNy43NGMtLjkyMS40Ni0uOTIxIDIuMy0uOTIxIDIuM1onLz48L3N2Zz4=',
    value: '1',
    label: '快',
    desc: '快速:提供快速的文本人性化，轻松绕过 AI 检测器'
  },
  {
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTExIDRsLS41LTFsLS41IDFsLTEgLjEyNWwuODM0LjcwOEw5LjUgNmwxLS42NjZsMSAuNjY2bC0uMzM0LTEuMTY3bC44MzQtLjcwOHptOC4zMzQgMTAuNjY2TDE4LjUgMTNsLS44MzQgMS42NjZsLTEuNjY2LjIwOWwxLjM4OSAxLjE4MUwxNi44MzQgMThsMS42NjYtMS4xMTFMMjAuMTY2IDE4bC0uNTU1LTEuOTQ0TDIxIDE0Ljg3NXpNNi42NjcgNi4zMzNMNiA1bC0uNjY3IDEuMzMzTDQgNi41bDEuMTExLjk0NEw0LjY2NyA5TDYgOC4xMTFMNy4zMzMgOWwtLjQ0NC0xLjU1Nkw4IDYuNXpNMy40MTQgMTdjMCAuNTM0LjIwOCAxLjAzNi41ODYgMS40MTRMNS41ODYgMjBjLjM3OC4zNzguODguNTg2IDEuNDE0LjU4NnMxLjAzNi0uMjA4IDEuNDE0LS41ODZMMjAgOC40MTRjLjM3OC0uMzc4LjU4Ni0uODguNTg2LTEuNDE0UzIwLjM3OCA1Ljk2NCAyMCA1LjU4NkwxOC40MTQgNGMtLjc1Ni0uNzU2LTIuMDcyLS43NTYtMi44MjggMEw0IDE1LjU4NmMtLjM3OC4zNzgtLjU4Ni44OC0uNTg2IDEuNDE0TTE3IDUuNDE0TDE4LjU4NiA3TDE1IDEwLjU4NkwxMy40MTQgOXonLz48L3N2Zz4=',
    value: '2',
    label: '平衡',
    desc: '平衡:提供中等级别的重写以绕过更多检测器'
  },
  {
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMiAxMicgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTEuNSA1LjVIMnYzaC0uNUEuNS41IDAgMDExIDhWNmEuNS41IDAgMDEuNS0uNVptOC0uNzVWOWExLjAwMSAxLjAwMSAwIDAxLTEgMWgtNWExLjAwMSAxLjAwMSAwIDAxLTEtMVY0Ljc1QTEuMjUgMS4yNSAwIDAxMy43NSAzLjVINS41di0xYS41LjUgMCAxMTEgMHYxaDEuNzVBMS4yNSAxLjI1IDAgMDE5LjUgNC43NVpNNS4xMjUgNmEuNjI1LjYyNSAwIDEwLTEuMjUgMCAuNjI1LjYyNSAwIDAwMS4yNSAwWk01IDhINHYuNWgxVjhabTEuNSAwaC0xdi41aDFWOFptMS42MjUtMmEuNjI1LjYyNSAwIDEwLTEuMjUgMCAuNjI1LjYyNSAwIDAwMS4yNSAwWk04IDhIN3YuNWgxVjhabTMtMnYyYS40OTkuNDk5IDAgMDEtLjUuNUgxMHYtM2guNWEuNS41IDAgMDEuNS41WicvPjwvc3ZnPg==',
    value: '3',
    label: '积极',
    desc: '激进:应用大量更改以绕过高级检测器'
  },
  {
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMiAxMicgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTExIDUuOTk1YS4zNS4zNSAwIDAwLS4xNDItLjI4MWwuMDAyLS4wMDMtMS4yMS0uNzA0LjY5Ny0xLjIxNS0uMDAzLS4wMDFhLjM1LjM1IDAgMDAtLjEyNy0uNDMyLjM0NC4zNDQgMCAwMC0uMTUyLS4wNTRWMy4zSDguNjdWMS44OThoLS4wMDNhLjM1LjM1IDAgMDAtLjE3LS4yNjQuMzQzLjM0MyAwIDAwLS4zMTMtLjAxNmwtLjAwMi0uMDAzLTEuMjMuNzE1LS42OC0xLjE4OC0uMDAzLjAwMUEuMzQ3LjM0NyAwIDAwNS45OSAxYS4zNDUuMzQ1IDAgMDAtLjI4LjE0M2wtLjAwMi0uMDAxLS42OTIgMS4yMDctMS4xOTItLjY5My0uMDAyLjAwM2EuMzQzLjM0MyAwIDAwLS40ODIuMjhoLS4wMDR2MS4zOTZIMS45NnYuMDAyYS4zNDQuMzQ0IDAgMDAtLjMwOC4zMjguMzUuMzUgMCAwMC4wMy4xNTlsLS4wMDQuMDAyLjY4IDEuMTg3LTEuMjE3LjcxLjAwMS4wMDJhLjM0OC4zNDggMCAwMDAgLjU2MWwtLjAwMS4wMDQgMS4yMDkuNzAzLS42OTYgMS4yMTUuMDAyLjAwMWEuMzUuMzUgMCAwMC4xMjcuNDMyYy4wNDYuMDMuMDk4LjA0OS4xNTIuMDU0VjguN2gxLjM5NnYxLjQwM2guMDAzYS4zNDkuMzQ5IDAgMDAuMzI1LjMxLjM0Mi4zNDIgMCAwMC4xNTgtLjAzbC4wMDIuMDAzIDEuMjMtLjcxNS42OCAxLjE4OC4wMDMtLjAwMUEuMzQ4LjM0OCAwIDAwNi4wMSAxMWEuMzQ1LjM0NSAwIDAwLjI4LS4xNDNsLjAwMi4wMDIuNjkyLTEuMjA4IDEuMTkyLjY5My4wMDItLjAwM2EuMzQzLjM0MyAwIDAwLjQyOS0uMTI4LjM1LjM1IDAgMDAuMDU0LS4xNTNoLjAwM1Y4LjY2NWgxLjM3NnYtLjAwMmEuMzQ0LjM0NCAwIDAwLjMwOC0uMzI4LjM1Mi4zNTIgMCAwMC0uMDMtLjE1OWwuMDA0LS4wMDItLjY4LTEuMTg3IDEuMjE4LS43MDktLjAwMi0uMDAyQS4zNDkuMzQ5IDAgMDAxMSA1Ljk5NVpNNS4xODUgNy40ODRsLTEuMjc3LS41NjkuNTY0Ljk4NC0uMzE5LjE4NS0uODY0LTEuNTA4LjMyOC0uMTkgMS4yMzYuNTQ0LS41NDMtLjk0OC4zMTgtLjE4NS44NjQgMS41MDgtLjMwNy4xNzlabS42MDMtLjM1MS0uODYzLTEuNTA4IDEuMDU4LS42MTYuMTYyLjI4My0uNzQuNDMuMTgxLjMxNy43MjUtLjQyMi4xNjEuMjgzLS43MjQuNDIxLjE5Ny4zNDQuNzQtLjQzLjE2Mi4yODItMS4wNTkuNjE2Wk04LjI0IDUuNzA3bC0uODU2LS44ODMuMzMzIDEuMTg2LS4zMzguMTk4LTEuMjkzLTEuMjU5LjM1Ny0uMjA3Ljg4Ny45MzYtLjM0LTEuMjU1LjI1LS4xNDUuOTA2LjkyNi0uMzYyLTEuMjQzLjM1Ny0uMjA3LjQzOCAxLjc1Ni0uMzM5LjE5N1onLz48L3N2Zz4=',
    value: '4',
    label: '最近的',
    desc: '最新:使用我们的最新模型使 AI 文本人性化，甚至可以击败 Originality 3.0 和Turnitino。'
  }
]

//最少文字输入提示
const showTip = ref(false)

//人性化转换按钮loading
const humanizedAILoading = ref(false)

const changeTextModeLoading = ref(false)

//人性化转换事件
const onHumanizedAI = () => {
  if (input.value.length < 50) {
    showTip.value = true
    return
  }
  humanizedAILoading.value = true
  changeTextModeLoading.value = true
  clearInterval(setInterId.value)
  setInterId.value = setInterval(() => {
    percentage.value = (percentage.value % 100) + 10
  }, 500)
  setTimeout(() => {
    checkResultShow.value = true
    humanizedAILoading.value = false
    changeTextModeLoading.value = false
    changeTextMode.value = false
    changeText.value = '测试文本转换'
  }, 500)
}

const onRefreshHumanizedAI = () => {
  if (input.value.length < 50) {
    showTip.value = true
    return
  }
  changeText.value = ''
  changeTextMode.value = true
  changeTextModeLoading.value = true
  checkResultShow.value = false
  clearInterval(setInterId.value)
  setInterId.value = setInterval(() => {
    percentage.value = (percentage.value % 100) + 10
  }, 500)
  setTimeout(() => {
    changeTextMode.value = false
    changeTextModeLoading.value = false
    checkResultShow.value = true
    changeText.value = '测试文本转换'
  }, 500)
}

const inputTextarea = () => {
  showTip.value = false
  changeTextMode.value = true
  checkResultShow.value = false
}

//转换文本显示
const changeTextMode = ref(true)

//转换的文本
const changeText = ref('')
const successfulCopy = ref(false)
const successfulCopyTimeId = ref()
//复制文本
const copyText = () => {
  if (!changeText.value.length) return
  // 创建一个临时的 textarea 元素
  const textarea = document.createElement('textarea')
  textarea.value = changeText.value
  // 设置 textarea 为不可见，避免影响页面布局
  textarea.style.position = 'fixed'
  textarea.style.left = '-9999px'
  textarea.style.top = '-9999px'
  document.body.appendChild(textarea)
  // 选中文本框中的内容
  textarea.select()
  try {
    // 执行复制操作
    const successful = document.execCommand('copy')
    if (successful) {
      successfulCopy.value = true
      clearTimeout(successfulCopyTimeId.value)
      successfulCopyTimeId = setTimeout(() => {
        successfulCopy.value = false
      }, 1000)
      // alert('文本复制成功！');
    } else {
      successfulCopy.value = false
      // alert('复制失败，请重试。');
    }
  } catch (err) {
    // alert('复制过程中出现错误：' + err.message);
  }
  // 复制完成后移除临时的 textarea 元素
  document.body.removeChild(textarea)
}

const checkResultShow = ref(false)
const percentage = ref(0)
const setInterId = ref()
onUnmounted(() => {
  clearTimeout(successfulCopyTimeId.value)
  clearInterval(setInterId.value)
})

watch(percentage, (val) => {
  console.log('测试')

  if (val === 100) return clearInterval(setInterId.value)
})
</script>
<template>
  <div class="humanize">
    <div class="top" :style="[checkResultShow ? 'height: 1300px' : 'height: 1100px']">
      <div class="top-title pt-12 text-center">
        <div class="w-fit mx-auto rounded-full bg-white flex items-center gap-x-1 ps-4 pe-5 py-[6px]">
          <span class="ps-[2.5px] pe-[2px] pt-[2.5px] pb-[3px] i-cus--bypass-ai w-6 h-6"></span>
          <p class="font-semibold" _msttexthash="8606715" _msthash="2474">HIX 旁路</p>
        </div>
        <h1 class="font-bold text-3xl text-center md:text-2xl">绕过 Copyleaks AI 检测</h1>
        <h2 class="mt-2 text-[#677788]">立即绕过 Copyleaks AI 检测，在您的内容创作游戏中保持领先地位！</h2>
      </div>
      <!-- <div class="bg-[#F7FAFF] rounded-full flex items-center w-fit mx-auto border border-[#3753751A] p-1 mt-6">
        <span
          class="flex items-center gap-1 py-1 px-5 rounded-full cursor-pointer"
          href="/"
          :class="[
            { ' text-white bg-[#3A7EFF]': activeType === 1 },
            { ' text-[#375375D9] hover:text-[#3A7EFF] hover:bg-[#E6F4FFD9]': activeType !== 1 }
          ]"
          @click="changeActiveType(1)"
          ><span class="w-5 h-5 shrink-0 i-bxs--magic-wand"></span><span class="text-sm font-medium">绕过 AI</span></span
        ><span
          :class="[
            { ' text-white bg-[#3A7EFF]': activeType === 2 },
            { ' text-[#375375D9] hover:text-[#3A7EFF] hover:bg-[#E6F4FFD9]': activeType !== 2 }
          ]"
          @click="changeActiveType(2)"
          class="cursor-pointer flex items-center gap-1 py-1 px-5 rounded-full"
          href="/ai-detector"
          ><span class="w-5 h-5 shrink-0 i-cus--robot-solid"></span><span class="text-sm font-medium">AI 探测器</span></span
        >
      </div> -->
      <div class="mt-6 px-4 flex items-center justify-between">
        <div class="center-left" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
          <div class="flex items-center justify-between mb-2 h-8 relative">
            <div class="font-semibold">您的内容</div>
            <div class="flex items-center gap-x-3 md:hidden">
              <div>
                <div></div>
                <div>
                  <div
                    class="flex items-center gap-x-1 cursor-pointer text-primary hover:text-primary-hover italic text-xs relative after:absolute after:bottom-0 after:right-0 after:h-3 after:w-full after:translate-y-full before:absolute before:top-0 before:left-0 before:h-3 before:w-full before:-translate-y-full"
                  >
                    <el-popover trigger="hover" placement="bottom-end" class="w-[408px] md:max-w-[88vw]" width="430">
                      <template #reference>
                        <div class="flex items-center">
                          <div class="flex items-center"><span class="i-cus--brainstorm-ideas w-[18px] h-[18px]"></span></div>
                          <span style="margin-left: 5px">使用技巧</span>
                        </div>
                      </template>
                      <div class="popover-top">
                        <div class="w-[408px] md:max-w-[88vw] text-display Content_bypassOl__wt3Qv">
                          <div class="flex items-center gap-x-1 text-sm font-semibold">
                            <div class="flex items-center">
                              <span class="i-cus--brainstorm-ideas w-[18px] h-[18px] text-[#FAAD14]"></span>
                            </div>
                            <span>使用技巧</span>
                          </div>
                          <div class="mt-2 text-sm">
                            HIX Bypass 绕过 AI 检测的成功率为 95%。如果仍然检测到输出，请不要担心，请尝试以下 3 个经过验证的提示：
                          </div>
                          <ol class="bg-[#F7FAFF] rounded">
                            <li class="text-display text-sm relative">1.单击 “Retry” 按钮再次使文本人性化。</li>
                            <li class="text-display text-sm relative">2.或者，使用我们不同的模式使 AI 文本人性化。</li>
                            <li class="text-display text-sm relative">
                              3.或者，使用不同的AI模型（如 GPT-4o、Claude等）来生成您的内容，然后再通过我们的工具运行它。
                            </li>
                          </ol>
                          <div class="mt-2 text-sm">如果它仍然不起作用，请点击“不喜欢”告诉我们，向我们发送反馈。</div>
                        </div>
                      </div>
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              border-color: transparent;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              position: relative;
            "
            class="center-left-bottom border rounded-lg p-6 md:p-4 bg-white h-[600px] 2xl:h-[500px] md:h-[450px] shadow-cardPlan group border-[#FFF]"
          >
            <el-icon class="delete-icon" v-if="deleteIconShow" @click="onClearInput"><Delete /></el-icon>
            <el-input
              v-model="input"
              autosize
              type="textarea"
              @input="inputTextarea"
              maxlength="10000"
              style="max-height: 380px; overflow-x: auto; margin-top: 5px"
              placeholder="在这里输入您要人性化的文本"
              class="no-border-input"
            />
            <div class="pointer-events-none flex items-center gap-3 z-[3] flex-wrap w-full justify-center" v-if="!input.length">
              <div
                @click="onTestCases"
                class="p-[14px] flex flex-col items-center justify-center space-y-2 rounded-lg w-fit h-fit min-w-[160px] text-xs group transition-all hover:cursor-pointer bg-[#F6F8FA] hover:bg-[#E6F4FF] text-[#677788] hover:text-[#3A7EFF] text-center pointer-events-auto"
              >
                <span class="i-bx--file w-7 h-7"></span><span>试用示例</span>
              </div>
              <div
                @click="copy"
                class="p-[14px] flex flex-col items-center justify-center space-y-2 rounded-lg w-fit h-fit min-w-[160px] text-xs group transition-all hover:cursor-pointer bg-[#F6F8FA] hover:bg-[#E6F4FF] text-[#677788] hover:text-[#3A7EFF] text-center pointer-events-auto"
              >
                <span class="i-com--copy w-7 h-7"></span><span>粘贴文本</span>
              </div>
            </div>
            <div class="flex items-center w-full mt-4 justify-between">
              <div class="flex items-center">
                <!-- <el-button type="primary" plain @click="checkAI">检查 AI</el-button> -->
                <div style="margin-left: 0.75rem" class="text-[#94A2AE] text-sm">
                  <span class="px-1">{{ input.length }}/10000</span>的话
                </div>
              </div>
              <div class="flex items-center">
                <div>
                  模式:
                  <el-select v-model="modelValue" placeholder="Select" style="width: 150px; margin-left: 0.75rem">
                    <template #label="{ label, value }">
                      <div class="flex items-center">
                        <img :src="modeOptions.find((item) => item.value === value).img" alt="" class="w-4 h-4" />
                        <span style="margin-left: 10px">{{ label }}</span>
                      </div>
                    </template>
                    <el-option v-for="item in modeOptions" :key="item.value" :label="item.label" :value="item.value">
                      <el-tooltip effect="light" placement="right" :hide-after="10">
                        <template #content>
                          <div style="padding: 2px 5px">{{ item.desc }}</div>
                        </template>
                        <div class="flex items-center w-full">
                          <img :src="item.img" alt="" class="w-4 h-4" />
                          <span style="margin-left: 10px">{{ item.label }}</span>
                        </div>
                      </el-tooltip>
                    </el-option>
                  </el-select>
                </div>
                <el-button
                  :type="input.length ? 'primary' : 'info'"
                  style="margin-left: 0.75rem"
                  :plain="!Boolean(input.length)"
                  :loading="humanizedAILoading"
                  @click="onHumanizedAI"
                  :disabled="!Boolean(input.length)"
                >
                  <span class="i-cus--gpt4 w-4 h-4"></span>
                  人性化</el-button
                >
              </div>
            </div>
            <div
              v-if="showTip"
              class="text-start flex justify-end mt-1 text-xs text-[#F77062]"
              style="position: absolute; bottom: 0; right: 15px"
            >
              您的输入应至少包含 50 个单词。
            </div>
          </div>
        </div>
        <div class="center-right">
          <div class="flex items-center justify-between mb-2 h-8 relative">
            <div class="font-semibold">输出</div>
          </div>
          <div
            style="border-color: transparent; display: flex; flex-direction: column; justify-content: space-between"
            class="center-left-bottom border rounded-lg p-6 md:p-4 bg-white h-[600px] 2xl:h-[500px] md:h-[450px] shadow-cardPlan group border-[#FFF]"
          >
            <template v-if="changeTextMode">
              <div class="h-full w-full">
                <div class="w-full h-full flex items-center justify-center flex-col gap-y-4">
                  <template v-if="changeTextModeLoading">
                    <div class="w-[98px] h-[80px] relative">
                      <img
                        alt="empty icon"
                        loading="lazy"
                        decoding="async"
                        data-nimg="fill"
                        class="object-cover"
                        style="position: absolute; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; color: transparent"
                        src="@/assets/img/loading.gif"
                      />
                    </div>
                    <div class="font-semibold text-center">转换中...</div>
                  </template>
                  <template v-if="!changeTextModeLoading">
                    <div class="w-[98px] h-[80px] relative">
                      <img
                        alt="empty icon"
                        loading="lazy"
                        decoding="async"
                        data-nimg="fill"
                        class="object-cover"
                        style="position: absolute; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; color: transparent"
                        src="@/assets/img/empty-icon.webp"
                      />
                    </div>
                  </template>
                </div>
              </div>
            </template>
            <template v-if="!changeTextMode">
              <el-text
                style="
                  max-height: 380px;
                  overflow-x: auto;
                  color: var(--el-input-text-color, var(--el-text-color-regular));
                  display: block;
                  font-family: inherit;
                  font-size: 14px;
                  line-height: 1.5;
                  align-self: auto;
                "
                >{{ changeText }}</el-text
              >

              <div class="flex items-center w-full mt-4 justify-between">
                <div class="flex items-center">
                  <div style="margin-left: 0.75rem" class="text-[#94A2AE] text-sm">
                    <span class="px-1">{{ changeText.length }}</span
                    >的话
                  </div>
                </div>
                <div>
                  <el-tooltip content="重试">
                    <el-icon class="customIcon" style="margin-right: 10px" @click="onRefreshHumanizedAI"><RefreshRight /></el-icon>
                  </el-tooltip>
                  <template v-if="!successfulCopy">
                    <el-tooltip content="复制">
                      <el-icon class="customIcon" @click="copyText"><DocumentCopy /></el-icon>
                    </el-tooltip>
                  </template>
                  <template v-if="successfulCopy">
                    <el-tooltip content="复制成功">
                      <el-icon class="customIcon" style="color: #00c2a7"><SuccessFilled /></el-icon>
                    </el-tooltip>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <checkResult v-if="checkResultShow" :percentage="percentage"></checkResult>
    </div>
    <div class="bottom" style="height: 1000px">
      <writing></writing>
      <truePower></truePower>
      <guaranteed></guaranteed>
      <success></success>
      <effective></effective>
      <priceInfo></priceInfo>
      <converter></converter>
      <detector></detector>
      <faq></faq>
      <effortlessly></effortlessly>
      <footerCustom></footerCustom>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import '@/assets/css/humanize.less';
.ps-4 {
  padding-inline-start: 1rem;
}
.pe-5 {
  padding-inline-end: 1.25rem;
}
.py-\[6px\] {
  padding-top: 6px;
  padding-bottom: 6px;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.rounded-full {
  border-radius: 9999px;
}
.gap-x-1 {
  -moz-column-gap: 0.25rem;
  column-gap: 0.25rem;
}
.items-center {
  align-items: center;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.flex {
  display: flex;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.i-cus--bypass-ai,
.i-cus--bypass-ai-detection {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.i-cus--bypass-ai {
  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48ZyBmaWxsPSdub25lJz48cGF0aCBmaWxsPSd1cmwoI2J5cGFzcy1haV9hKScgZmlsbC1ydWxlPSdldmVub2RkJyBkPSdNMTcuNSA1LjVoLTlhMSAxIDAgMDAtMSAxdjEyYTEgMSAwIDAwMSAxaDlhMSAxIDAgMDAxLTF2LTEyYTEgMSAwIDAwLTEtMVptLTktMWEyIDIgMCAwMC0yIDJ2MTJhMiAyIDAgMDAyIDJoOWEyIDIgMCAwMDItMnYtMTJhMiAyIDAgMDAtMi0yaC05WicgY2xpcC1ydWxlPSdldmVub2RkJy8+PHBhdGggZmlsbD0ndXJsKCNieXBhc3MtYWlfYiknIGQ9J00yLjUgNC41YTIgMiAwIDAxMi0yaDExYTIgMiAwIDAxMiAydjE0YTIgMiAwIDAxLTIgMmgtMTFhMiAyIDAgMDEtMi0ydi0xNFonLz48cGF0aCBmaWxsPScjZmZmJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGQ9J00xNSA3Ljk2M2EuMjUzLjI1MyAwIDAwLS4yNTMtLjI1M0g5LjY5NGEuNS41IDAgMDEtLjQ2NC0uNjg2bC43MjEtMS43OTdhLjEwOS4xMDkgMCAwMC0uMTc1LS4xMkw3LjQ1NCA3LjI3NWEuNS41IDAgMDEtLjM0MS4xMzRoLTEuMjlhLjUuNSAwIDAxMC0xaDEuMDkzbDIuMTc4LTIuMDMzQTEuMTA5IDEuMTA5IDAgMDExMC44NzkgNS42bC0uNDQ2IDEuMTFoNC4zMTRhMS4yNTMgMS4yNTMgMCAxMTAgMi41MDZoLTMuMDA1Yy0uMTEyLjc1OC0uMyAxLjczNC0uNzI1IDIuNDkyLS4yNjIuNDY5LS42MzguODk3LTEuMTggMS4xMjUtLjU0OS4yMy0xLjE5Mi4yMjQtMS45MjItLjAzMWEuNTAxLjUwMSAwIDAxLS4wMi0uMDA4Yy0xLjYxLS42NDQtMS45NzctLjg2Mi0yLjI1My0xLjAyNWEzLjY0NiAzLjY0NiAwIDAwLS4zNTMtLjE5LjUuNSAwIDAxLjQyMi0uOTA3Yy4yNDMuMTE0LjM2LjE4My40OC4yNTYuMjU1LjE1NC41My4zMiAyLjA2NS45MzMuNTU1LjE5My45My4xNiAxLjE5My4wNS4yNzEtLjExNC41LS4zNDQuNjk1LS42OTEuNDAzLS43MTguNTU3LTEuNzQ4LjY2Ny0yLjU3YS41LjUgMCAwMS40OTUtLjQzNGgzLjQ0MWMuMTQgMCAuMjUzLS4xMTMuMjUzLS4yNTNaTTUgMTUuNWEuNS41IDAgMDEuNS0uNWg2YS41LjUgMCAxMTAgMWgtNmEuNS41IDAgMDEtLjUtLjVabTAgMmEuNS41IDAgMDEuNS0uNWg0YS41LjUgMCAxMTAgMWgtNGEuNS41IDAgMDEtLjUtLjVaJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnLz48cGF0aCBmaWxsPScjMEEzQkRGJyBkPSdtMTcuMjA3IDEzLjMyNyAyLjE3Ni0xLjk3NyAyLjM5MyAyLjQxNi0yLjE3NiAyLjE5NiAyLjE3NiAyLjQxNi0yLjM5MyAyLjE5NS0yLjE3Ni0xLjk3Ni0xLjMwNiAxLjA5OC0yLjgyOC44NzgtLjQzNS0uNDM5LjY1My0yLjg1NSAxLjMwNS0xLjMxNy0yLjE3Ni0yLjE5NiAyLjM5NC0yLjQxNiAyLjM5MyAxLjk3N1onLz48cGF0aCBmaWxsPScjZmZmJyBkPSdtMjAuMTMgMTUuOTk1IDEuNTU1LTEuNTdjLjQyLS40MjQuNDItMS4xMDMgMC0xLjQ4NGwtMS42NC0xLjY1NWMtLjM3OC0uMzgxLTEuMDkyLS4zODEtMS40NyAwbC0xLjU1NSAxLjU3LTEuNTU1LTEuNTdjLS4zNzgtLjM4MS0xLjA5My0uMzgxLTEuNDcxIDBsLTEuNjQgMS42NTVjLS40Mi40MjQtLjQyIDEuMTAzIDAgMS40ODRsMS41NTYgMS41Ny0uNjczLjYzNmEuODgyLjg4MiAwIDAwLS4yNTIuNDI0bC0uOTI0IDIuNTg4Yy0uMTI2LjMzOS0uMDQyLjY3OC4xMjYuOTMzLjIxLjI1NC41MDQuNDI0Ljg0LjQyNC4xMjYgMCAuMjEgMCAuMzM3LS4wNDJsMi41NjMtLjkzNGEuODcuODcgMCAwMC40Mi0uMjU0bC42My0uNjM2IDEuNTU2IDEuNTY5Yy4yMS4yMTIuNDYyLjI5Ny43NTYuMjk3cy41NDctLjEyNy43NTctLjI5N2wxLjYzOS0xLjY1NGMuNDItLjQyNS40Mi0xLjEwMyAwLTEuNDg1bC0xLjU1NS0xLjU3Wm0tLjctNC4yYy4wNDEgMCAuMTI1LjA0My4xNjcuMDQzbDEuNjQgMS42NTRhLjIwNi4yMDYgMCAwMTAgLjI5N2wtLjU5LjU5NC0xLjkzMi0xLjk1MS41ODgtLjU5NHMuMDQyLS4wNDMuMTI2LS4wNDNabS01LjM4IDMuMDU0Ljc1Ni0uNzYzYS4zMzUuMzM1IDAgMDAwLS40NjcuMzI4LjMyOCAwIDAwLS40NjIgMGwtLjc1Ny43NjQtLjU0Ni0uNTUyYS4yMDcuMjA3IDAgMDEwLS4yOTdsMS42NC0xLjY1NGMuMDQxLS4wNDIuMDgzLS4wNDIuMTY3LS4wNDJzLjEyNi4wNDIuMTY4LjA0MmwxLjUxMyAxLjU3LTEuOTMzIDEuOTUtLjU0Ni0uNTVabTEuODQ5IDQuMzdzLS4wNDIuMDQyLS4wODQuMDQybC0yLjU2NC45MzNjLS4wODQuMDQzLS4xNjggMC0uMjEtLjA4NS0uMDQyLS4wNDItLjA0Mi0uMDg1LS4wNDItLjE3bC45MjUtMi41ODdjMC0uMDQyLjA0Mi0uMDQyLjA0Mi0uMDg1bDQuMjg2LTQuMzI2IDEuOTM0IDEuOTUtLjg0MS44NS0yLjUyMiAyLjU0NC0uOTI0LjkzM1ptNS4yOTUtLjc2NC0xLjYzOSAxLjY1NGEuMjAyLjIwMiAwIDAxLS4yOTQgMGwtLjU0Ni0uNTUxLjc1Ni0uNzY0YS4zMzUuMzM1IDAgMDAwLS40NjYuMzI4LjMyOCAwIDAwLS40NjIgMGwtLjc1Ny43NjMtLjU0Ni0uNTUxIDEuOTMzLTEuOTUxIDEuNTU1IDEuNTY5YS4yMDYuMjA2IDAgMDEwIC4yOTdaJy8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdieXBhc3MtYWlfYScgeDE9JzExJyB4Mj0nMTEnIHkxPScyLjUnIHkyPScyMC41JyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PHN0b3Agc3RvcC1jb2xvcj0nIzY5ODZGRicvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nIzM3NjBFQycvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSdieXBhc3MtYWlfYicgeDE9JzExJyB4Mj0nMTEnIHkxPScyLjUnIHkyPScyMC41JyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PHN0b3Agc3RvcC1jb2xvcj0nIzY5ODZGRicvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nIzM3NjBFQycvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvZz48L3N2Zz4=);
}
.pt-\[2\.5px\] {
  padding-top: 2.5px;
}
.ps-\[2\.5px\] {
  padding-inline-start: 2.5px;
}
.pe-\[2px\] {
  padding-inline-end: 2px;
}

.pb-\[3px\] {
  padding-bottom: 3px;
}
.w-6 {
  width: 1.5rem;
}
.h-6 {
  height: 1.5rem;
}
</style>
